<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="icon" href="/static/image/code.png">
</head>
<body class="body">
<div class="layui-row layui-col-space12">
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
        <script type="text/html" id="permissionToolbar">
            <button class="layui-btn layui-btn-sm" lay-event="expandAll">全部展开</button>
            <button class="layui-btn layui-btn-sm" lay-event="foldAll">全部折叠</button>
            <button class="layui-btn layui-btn-sm" lay-event="refresh">刷新表格</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="addPermission">添加权限
            </button>
        </script>
        <table id="permissionTable" lay-filter="permissionTable"></table>
    </div>
</div>
<!-- 操作列 -->
<script type="text/html" id="oper-col">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">添加下级权限</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
<script type="text/javascript" src="/static/js/module.js"></script>
<script type="text/javascript">

    // layui方法
    layui.use(['layer', 'form', 'table', 'treetable', 'treeSelect', 'iconPicker', 'comm'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        var treetable = layui.treetable;
        var form = layui.form;
        var treeSelect = layui.treeSelect;
        var iconPicker = layui.iconPicker;
        var comm = layui.comm;
        var renderTable = function () {
            treetable.render({
                treeColIndex: 1,
                treeSpid: -1,
                treeIdName: 'id',
                treePidName: 'pid',
                treeDefaultClose: false,
                treeLinkage: false,
                elem: '#permissionTable',
                url: '/permission/queryAll',
                toolbar: '#permissionToolbar',
                page: false,
                cols: [
                    [
                        {field: 'id', checkbox: true},
                        {field: 'permissionName', title: '权限名称', width: '15%'},
                        {field: 'permissionCode', title: '权限编码', width: '15%'},
                        {field: 'typeName', title: '类型', width: '10%'},
                        {templet: '#oper-col', title: 'oper'}
                    ]
                ]
            });
        }
        renderTable();

        var renderTreeSelect = function (pid) {
            treeSelect.render({
                // 选择器
                elem: '#pPermissionTree',
                // 数据
                data: '/permission/getTreeData',
                // 异步加载方式：get/post，默认get
                type: 'get',
                // 占位符
                placeholder: '修改默认提示信息',
                // 是否开启搜索功能：true/false，默认false
                search: true,
                // 点击回调
                click: function (d) {
                    console.log(d.current);
                },
                // 加载完成后的回调函数
                success: function (d) {
                    treeSelect.checkNode('pPermissionTree', pid);
                }
            });
        };

        //头工具栏事件
        table.on('toolbar(permissionTable)', function (obj) {
            switch (obj.event) {
                case 'expandAll':
                    treetable.expandAll('#menuTable');
                    break;
                case 'foldAll':
                    treetable.foldAll('#menuTable');
                    break;
                case 'refresh':
                    renderTable();
                    break;
                case 'addPermission':
                    addPermission(true, -1);
                    break;
            }
        });

        //监听工具条
        table.on('tool(permissionTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                delPermission(data.id);
            } else if (layEvent === 'edit') {
                editPermission(data)
            } else if (layEvent === 'add') {
                addPermission(false, data.id);
            }
        })

        /**
         * 添加菜单
         * @param isRoot 是否为一级
         * @param id 菜单ID
         */
        function addPermission(isRoot, pid) {
            // 清空
            document.getElementById("permissionDetailForm").reset();
            if (isRoot) {
                $('#pPermissionItem').attr('style', 'display:none');
            } else {
                // 父菜单名称
                $('#pPermissionItem').attr('style', 'display:block');
                // 移除多余的treeSelect
                if ($('.layui-treeSelect')) {
                    $('.layui-treeSelect').remove();
                }
                // 加载并选中
                renderTreeSelect(pid);
            }


            comm.open($('#permissionDetail'), function (index, layero) {
                var formData = comm.getFormData('permissionDetailForm');
                formData.pid = pid == -1 ? pid : treeSelect.zTree('pPermissionTree').getSelectedNodes()[0].id;
                // 新增
                comm.post('/permission/editPermission?oper=0', formData, function (respData) {
                    if (respData.code == 0) {
                        // 提示成功
                        layer.msg("操作成功");
                        // 关闭弹框
                        layer.close(index);
                        // 刷新表格
                        renderTable();
                    } else if (respData.code == 500 || respData.code == -1) {
                        // 提示失败
                        layer.msg(respData.msg);
                        // 关闭弹框
                        layer.close(index);
                    }
                });
            });

        }

        /**
         * 编辑权限
         * @param data 数据
         */
        function editPermission(data) {
            var pid = data.pid;
            // 父机构名称
            if (pid == -1) {
                // 一级不显示父菜单名称
                $('#pPermissionItem').attr('style', 'display:none');
            } else {
                // 一级以下显示父菜单名称
                $('#pPermissionItem').attr('style', 'display:block');
                // 移除多余的treeSelect
                $('.layui-treeSelect').remove();
                // 加载并选中
                renderTreeSelect(pid);
            }
            $('#permissionCode').val(data.permissionCode);
            $('#permissionName').val(data.permissionName);

            $('input[name="type"]').each(function () {
                var val = $(this).val();
                if (val == data.type) {
                    $(this).attr('checked', 'checked');
                } else {
                    $(this).removeAttr('checked');
                }
            });

            comm.open($('#permissionDetail'), function (index, layero) {
                var formData = comm.getFormData('permissionDetailForm');
                formData.id = data.id;
                formData.pid = pid == -1 ? pid : treeSelect.zTree('pPermissionTree').getSelectedNodes()[0].id;
                // 修改数据
                comm.post('/permission/editPermission?oper=1', formData, function (respData) {
                    if (respData.code == 0) {
                        // 提示成功
                        layer.msg("操作成功");
                        // 关闭弹框
                        layer.close(index);
                        // 刷新表格
                        renderTable();
                    } else if (respData.code == 500 || respData.code == -1) {
                        // 提示失败
                        layer.msg(respData.msg);
                        // 关闭弹框
                        layer.close(index);
                    }
                });

            });

        }

        /**
         * 删除权限
         * @param id 权限ID
         */
        function delPermission(id) {
            layer.confirm("确认删除吗", function (index, layero) {
                comm.post('/permission/editPermission?oper=2', {id: id}, function (respData) {
                    if (respData.code == 0) {
                        // 提示成功
                        layer.msg("操作成功");
                        // 关闭弹框
                        layer.close(index);
                        // 刷新表格
                        renderTable();
                    } else if (respData.code == 500 || respData.code == -1) {
                        // 提示失败
                        layer.msg(respData.msg);
                        // 关闭弹框
                        layer.close(index);
                    }
                });
            });
        }

    })
</script>
</body>
<div id="permissionDetail" style="display: none">
    <div class="layui-col-xs11 layui-col-sm11 layui-col-md11">
        <form id="permissionDetailForm" class="layui-form" action="">
            <div class="layui-form-item">
            </div>
            <div id="pPermissionItem" class="layui-form-item">
                <label class="layui-form-label">父权限名称</label>
                <div class="layui-input-block">
                    <input type="text" id="pPermissionTree" lay-verify="tree" class="layui-input"
                           lay-filter="pPermissionTree">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">权限名称</label>
                <div class="layui-input-block">
                    <input type="text" id="permissionName" name="permissionName"
                           lay-verify="menuName"
                           autocomplete="off"
                           placeholder="请输入权限名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">权限编码</label>
                <div class="layui-input-block">
                    <input type="text" id="permissionCode" name="permissionCode"
                           lay-verify="permissionCode"
                           autocomplete="off"
                           placeholder="请输入权限编码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="type" value="001" title="菜单" checked="">
                    <input type="radio" name="type" value="002" title="按钮">
                </div>
            </div>
        </form>
    </div>
</div>
</html>